<!-- third-input-box 组件文本输入框 -->
<template>
  <div class="third-input-box" :class="{'border-active':border_active,'border-width100':borderLength}">
    <span class="c-name"><i class="must-entry" v-if="hKind !== '0'">*</i>{{hPlaceholder}}</span><textarea ref="cInput" class="c-input" :type="hType" :placeholder="hPlaceholder" :value="value" @input="inputFunc($event, $event.currentTarget)"></textarea>
  </div>
</template>

<script>
import myClass from '@/assets/js/common'
export default {
  name: 'thirdInputBox',
  
  data () {
    return {
      border_active: false, // 错误展示类
    }
  },
  props: {
    'value': {
      default: () => {
        return ''
      }
    },
    'h-placeholder': {
      default: () => {
        return ''
      }
    },
    'h-type': {
      default: () => {
        return 'text'
      }
    },
    // 0 不校验 1校验下是否为空 2校验下是否为数字
    'h-kind': {
      default: '0',
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['0', '1', '2'].indexOf(value) !== -1
      }
    },
    // 用来校验 当变化的时候 一般提交的时候变化
    'h-check': {
      default: 0
    },
    'border-length': {
      default: () => {
        return true
      }
    }
  }, //['value', 'h-placeholder', 'h-type'],
  components: {},

  computed: {},
  watch: {
    hCheck () {
      if (this.hType === 'number' && myClass.provingFloatTwo(this.value)) {
        this.border_active = false
      } else if (this.hType === 'number') {
        this.border_active = true
      }
      if (this.hKind === '1' && this.value.trim() !== '') {
        this.border_active = false
      } else if (this.hKind === '1') {
        this.border_active = true
      }
      if (this.hKind === '2' && myClass.provingFloatTwo(this.value)) {
        this.border_active = false
      } else if (this.hKind === '2') {
        this.border_active = true
      }
    },
    value () {
      if (this.hType === 'number' && myClass.provingFloatTwo(this.value)) {
        this.border_active = false
      } else if (this.hType === 'number') {
        this.border_active = true
      }
      if (this.hKind === '1' && this.value.trim() !== '') {
        this.border_active = false
      } else if (this.hKind === '1') {
        this.border_active = true
      }
      if (this.hKind === '2' && myClass.provingFloatTwo(this.value)) {
        this.border_active = false
      } else if (this.hKind === '2') {
        this.border_active = true
      }
    }
  },
  methods: {
    inputFunc (e, target) {
      if (this.hType === 'number' && myClass.provingFloatTwo(target.value)) {
        this.border_active = false
      } else if (this.hType === 'number') {
        this.border_active = true
      }
      if (this.hKind === '1' && target.value.trim() !== '') {
        this.border_active = false
      } else if (this.hKind === '1') {
        this.border_active = true
      }
      if (this.hKind === '2' && myClass.provingFloatTwo(target.value)) {
        this.border_active = false
      } else if (this.hKind === '2') {
        this.border_active = true
      }
      this.$emit('input', target.value)
    }
  },

  mounted () {}
}
</script>
<style lang="stylus" scoped>
$rem = 2.5
.third-input-box
  position relative
  padding  0.2rem * $rem  0.2rem * $rem
  display flex
  justify-content flex-start
  align-items flex-start
  &:after
    content ""
    position absolute
    bottom 0
    left 0
    right 0
    margin 0 auto
    width calc(100% - 1rem)
    height 0.02rem * $rem
    background-color #dddddd
  &.border-width100:after
    width 100%
  &.border-active:after
    background-color #ff0000
  .c-input
    min-height 2rem * $rem
    font-size 0.27rem * $rem
    line-height 0.6rem * $rem
    background-color transparent
    border none
    outline none
    color #333
    flex 1 1 auto
    text-align right
  .c-name
    position relative
    color #1a1e24
    font-weight bold
    padding-right 0.1rem * $rem
    font-size 0.3rem * $rem
    .must-entry
      position absolute
      display flex
      align-items center
      height 100%
      // box-sizing border-box
      // padding 0.27rem * $rem  0
      top 0
      left -0.12rem * $rem
      font-size 0.3rem * $rem
      color #ff6b6b
      font-style normal
      line-height normal
</style>
